<template>
    <div class="equipment-move-box box-empty">
        <div class="equipment-move">
            <div class="move-title">个人信息</div>
            <formDeploy ref="ruleForm" :deployRule="userDetails" @submitForm="submitForm" />
        </div>
    </div>
</template>

<script>
import formDeploy from '@/components/formDeploy.vue';
import {updatePhone} from '@/utils/api.js';
export default {
    name: 'information',
    components: {formDeploy},
    data() {
        return {
            deployRule: [],
        };
    },
    computed: {
        // eslint-disable-next-line vue/no-dupe-keys, vue/return-in-computed-property
        userDetails() {
            let i = JSON.parse(localStorage.getItem('userDetails'));
            return [
                {
                    title: '用户名',
                    placeholder: '',
                    type: 'name',
                    val: i.name,
                    showPassword: false,
                    disabled: true,
                    rules: [],
                },
                {
                    title: '用户类型：',
                    placeholder: '',
                    type: 'type',
                    val: i?.data.type,
                    showPassword: false,
                    disabled: true,
                    rules: [],
                },
                {
                    title: 'API-KEY：',
                    placeholder: '',
                    type: 'user_key',
                    val: i.user_key,
                    showPassword: false,
                    disabled: true,
                    rules: [],
                },
                {
                    title: '手机号：',
                    placeholder: '',
                    type: 'phone',
                    val: i.phone,
                    showPassword: false,
                    disabled: false,
                    rules: [
                        {required: false, message: '请输入手机号', trigger: 'blur'},
                        {min: 11, max: 11, message: '长度在 11 个字符', trigger: 'blur'},
                    ],
                },
                {
                    title: '邮箱：',
                    placeholder: '',
                    type: 'email',
                    val: i.email,
                    showPassword: false,
                    disabled: false,
                    rules: [
                        {required: false, message: '请输入邮箱', trigger: 'blur'},
                        {min: 1, max: 44, message: '--', trigger: 'blur'},
                    ],
                },
            ];
        },
    },
    methods: {
        submitForm(ruleForm) {
            // 确保引用的是子组件的 ref，然后获取子组件中的 el-form 的 ref
            const formComponent = this.$refs['ruleForm'];
            if (formComponent && formComponent.$refs.ruleForm) {
                formComponent.$refs.ruleForm.validate(valid => {
                    if (valid) {
                        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                        const email = ruleForm.email;
                        const isValidEmail = emailRegex.test(email);
                        if (isValidEmail) {
                            updatePhone(ruleForm)
                                .then(res => {
                                    this.$message({
                                        message: '修改成功',
                                        type: res,
                                    });
                                })
                                .catch(err => {
                                    console.log(err);
                                });
                        } else {
                            this.$message({
                                message: '邮箱格式不正确',
                            });
                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            } else {
                console.error('无法找到对应的表单组件或表单');
            }
        },
    },
    mounted() {},
};
</script>

<style scoped lang="scss">
/* 组件样式 */
.place-type {
    width: 70px;
}

.save-button {
    background-image: url('@/assets/img/save-button.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 160px;
    line-height: 44px;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
    font-size: 16px;
    margin-top: 30px;
    margin-left: auto;
}
</style>

<style scoped>
.placeholder-box {
    color: #fff;
    display: flex;
    justify-content: flex-start;
    margin-top: 20px;
}

.placeholder-box >>> .el-input__inner {
    background: none;
    border: #0177fd 1px solid;
    border-radius: 6px;
    font-weight: 400;
    font-size: 14px;
    color: #ffffff;
    line-height: 46px;
    height: 46px;
}

.placeholder-box >>> .el-input-group__append {
    background: none;
    border: none;
    color: #fff;
    background-image: url('@/assets/img/fg-button.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transform: translateX(10px);
}

.add-user {
    color: #fff;
    background-image: url('@/assets/img/fg1-button.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 102px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 10px;
    right: 20px;
}

.disabled >>> .el-input__inner {
    background: #2d4081 !important;
}
</style>
